<!-- 入住记录列表 -->
<template>
  <div class="chekinList-continer">
    <BackgroundBox v-loadings="props.isLoading">
      <el-table v-if="props.CheckInRecordData.length" :data="CheckInRecordData" style="width: 100%" >
        <el-table-column prop="studentID" label="学号" />
        <el-table-column prop="studentName" label="姓名"  />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="OrderNo" label="订单号" />
        <el-table-column prop="checkInTime" label="入住时间" />
        <el-table-column prop="dormitoryName" label="宿舍楼" />
        <el-table-column prop="floorNumber" label="楼层" />
        <el-table-column prop="roomNo" label="房间号" />
        <el-table-column prop="bednumber" label="床位" />
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" @current-change="chandleCurrent"  :current-pag="props.page"  :total="props.total" />
      </div>
    </BackgroundBox>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
const props = defineProps({
    CheckInRecordData:{
        type: Array,
        default: () => []
    },
    total:{
        type: Number,
        default:0
    },
    page:{
        type: Number,
        default: 1
    },
    isLoading:{
      type:Boolean,
      default: false
    }
})
const emit = defineEmits(["chandleCurrent"])
const chandleCurrent =(data) =>{
    emit("chandleCurrent",data)
}
</script>

<style lang="less" scoped>
.chekinList-continer{
  width: 100%;
  height: 100%;
  margin-bottom: 50px;
    .back-container{
        width: 100%;
        padding: 20px;
        min-height: 300px;
    }
    .pagination{
        padding: 20px 0;
        display: flex;
        justify-content: center;
    }
}
</style>